<template>
  <div
    :class="{'txt-bottom-link' : (type === 'money' && value!=0) || type!=='money' ? 'txt-bottom-link' : ''}"
    @click="click"
  >
    <span>{{ type === 'money' ? value : text }}</span>
  </div>
</template>

<script>
export default {
  name: 'LinkText',
  /**
     * type链接类型: default: 默认链接 money: 金额链接
     * text:链接文本 type非money时有效
     * value:金额 type：money时有效
     * click:点击事件 type:moeny && value<0不触发
     * 示例: <link-text type="money" :value="100.00"></link-text>
     */
  props: {
    type: {
      type: String,
      default: 'money'
    },
    text: {
      type: [Number, String],
      default: 0
    },
    value: {
      type: [Number, String],
      default: 0
    }
  },
  methods: {
    click() {
      if ((this.type === 'money' && this.value !== 0) || this.type !== 'money') {
        this.$emit('click')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .txt-bottom-link {
    color: #409EFF;
    display: inline-block;
    border-bottom: 1px solid #409EFF;
  }

  .txt-bottom-link:hover {
    cursor: pointer;
  }
</style>
